<?php require __DIR__.'/top.phtml';?>
    <title><?php echo $this->title;?></title>
    <meta name="description" content="<?php echo $this->description;?>" />
    <meta name="keywords" content="<?php echo $this->keywords;?>" />
    </head>
    <body>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>组件</cite></a>
        <a><cite>数据表格</cite></a>
        <a><cite>固定列</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">固定列</div>
                <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">文章ID</label>
                            <div class="layui-input-inline">
                                <input type="text" name="id" placeholder="请输入" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">作者</label>
                            <div class="layui-input-inline">
                                <input type="text" name="author" placeholder="请输入" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">标题</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title" placeholder="请输入" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">文章标签</label>
                            <div class="layui-input-inline">
                                <select name="label">
                                    <option value="">请选择标签</option>
                                    <option value="0">美食</option>
                                    <option value="1">新闻</option>
                                    <option value="2">八卦</option>
                                    <option value="3">体育</option>
                                    <option value="4">音乐</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn" lay-submit lay-filter="search">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="table" lay-filter="table"></table>
                    <script type="text/html" id="status">
                        <input type="checkbox" name="status" lay-skin="switch" lay-text="<?php echo l('status.1').'|'.l('status.0');?>" lay-filter="status" value="{{ d.status }}" data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{ d.status === 1 ? 'checked' : '' }}>
                    </script>
                    <script type="text/html" id="toolbar">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm" lay-event="batchdel"><?php echo l($this->controller.'.delete');?></button>
                            <button class="layui-btn layui-btn-sm" lay-event="add"><?php echo l($this->controller.'.post');?></button>
                        </div>
                    </script>
                    <script type="text/html" id="operate">
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail"><?php echo l($this->controller.'.get');?></a>
                        <a class="layui-btn layui-btn-xs" lay-event="edit"><?php echo l($this->controller.'.put');?></a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><?php echo l($this->controller.'.delete');?></a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.config({
        base: '/'
    }).extend({
        index: 'lib/index'
    }).use(['index', 'table', 'contlist', 'form'], function(){
        var table = layui.table
            ,form = layui.form
            ,admin = layui.admin
            ,$ = layui.$;

        table.render({
            elem: '#table'
            ,url: '/api/<?php echo $this->controller;?>/v1/'
            ,toolbar: '#toolbar'
            ,height: 'full-100'
            ,cellMinWidth: 80
            ,cols: [[
                {type:'checkbox',fixed:'left'},<?php
                    foreach ($this->cols as $cols) {
                        echo json_encode($cols, JSON_UNESCAPED_UNICODE).',';
                    }
                ?>{fixed:'right',toolbar:'#operate',unresize:true}
            ]]
            ,parseData: function(res){
                return {
                    "code": res.code === 'ok' ? 0 : res.code,
                    "msg": res.code === 'ok' ? '' : res.msg,
                    "count": res.count,
                    "data": res.data
                };
            }
            ,page: true
        });

        table.on('edit(table)', function(obj){
            var value = obj.value
                ,data = obj.data
                ,field = obj.field;
            layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value, {
                offset: '15px'
            });
        });

        table.on('toolbar(table)', function(obj){
            switch(obj.event){
                case 'add':
                    layer.open({
                        type: 2
                        ,title: '添加文章'
                        ,content: 'listform.html'
                        ,maxmin: true
                        ,area: ['550px', '550px']
                        ,btn: ['确定', '取消']
                        ,yes: function(index, layero){
                            //点击确认触发 iframe 内容中的按钮提交
                            var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                            submit.click();
                        }
                    });
                    break;
                case 'batchdel':
                    var checkStatus = table.checkStatus(obj.config.id)
                        ,checkData = checkStatus.data;

                    if(checkData.length === 0){
                        return layer.msg('请选择数据');
                    }

                    layer.confirm('确定删除吗？', function(index) {

                        //执行 Ajax 后重载
                        /*
                        admin.req({
                          url: 'xxx'
                          //,……
                        });
                        */
                        table.reload(obj.config.id);
                        layer.msg('已删除');
                    });
                    break;
            };
        });

        table.on('tool(table)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });

        form.on('switch(status)', function(obj){
            var json = JSON.parse(decodeURIComponent($(this).data('json')));
            layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);

            json = table.clearCacheKey(json);
            console.log(json); //当前行数据
        });

        form.on('submit(search)', function(data){
            var field = data.field;

            //执行重载
            table.reload('table', {
                where: field
            });
        });
    });
</script>
<?php require __DIR__.'/bottom.phtml';?>